/*
	在以下情况中，请使用 POST 请求：
	无法使用缓存文件（更新服务器上的文件或数据库）
	向服务器发送大量数据（POST 没有数据量限制）
	发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
 */
(function load(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhr.onreadystatechange = function(){
		var data;
		if(xhr.readyState==4 && xhr.status==200){
			data = xhr.responseText;//若为XML文件，用responseXML
		}
	}
	xhr.open("GET","url?t=" + Math.random(),true);
	/*
		若需要像 HTML 表单那样 POST 数据，用setRequestHeader
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	 */
	xhr.send("string");
})();
/*
	异步加载数据
 */
function loadList(){
	var xhr;
	var list = document.getElementById("list");
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4 && xhr.status==200){
			var data = JSON.parse(xhr.responseText);
			if(!data.success){
				alert("没有数据啦");
				return false;
			}
			for(var i = 0;i < data.data.length;i++){//for循环解释
				var li = document.createElement("li");
				li.innerHTML = '<div class="list-box"><a href="#" class="list-img"><img src="'+data.data[i].img+'"/></a>'+
					'<a href="#"><h4 class="title">'+data.data[i].title+'</h4>'+
					'<p class="desc">'+data.data[i].description+'</p></a>'+
					'<p><span class="privilege">'+data.data[i].privilege+'</span></p><p class="price-info">'+
					'<span class="price"><span class="unit">¥</span>'+data.data[i].price+'</span>'+
					'<span class="worth">价值¥<span class="strikethough">'+data.data[i].worth+'</span></span>'+
					'</p><p class="other-info">'+data.data[i].grade+'分<span class="sold">已售'+data.data[i].sold+'</span>'+
					'</p></div>';
				list.appendChild(li);
			}
		}
	}
	xhr.open("POST","/list.json?t=" + Math.random(),true);
	xhr.setRequestHeader("Content-Type","application/www-x-form-urlencoded");
	xhr.send();
};
window.onload = function(){
	loadList();
	var page = 1;
	window.onscroll = function(){
		var currTop = document.documentElement.scrollTop || document.body.scrollTop;
		var currClient = document.documentElement.clientHeight;
		var pageHeight = document.body.clientHeight;
		if(pageHeight-currClient-currTop < 100){
			if(page >= 10){
				alert("没有更多的数据啦");
				return;
			}
			page += 1;
			loadList();
		}
	}
}